import React, { Component } from "react"
import { Carousel, WingBlank } from 'antd-mobile';
import BScroll from 'better-scroll'
import "./index.css"
import { getDesignerBanner, getDesignerBrand } from "../../api/designer";
class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			banner: [],
			brand: []
		}
	}
	componentDidMount() {
		getDesignerBanner().then(res => {
			this.setState({
				banner: res.data.data
			})
		})

		getDesignerBrand().then(res => {
			this.setState({
				brand: res.data.data
			})
			this.listScroll();
		})


	}

	listScroll() {
		let len = this.state.brand.length;
		let oW = 6;
		this.refs["brandlist"].style.width = len * (oW + 0.6) + "rem";
		this.scroll = new BScroll(this.refs["brand"], {
			startX: 0,
			click: true,
			scrollX: true,
			scrollY: false,
			eventPassthrough: "vertical"
		});
	}

	goToStore(id) {
		this.props.history.push("/shopstore/" + id)
	}


	render() {
		let { banner, brand } = this.state;
		return (
			<div className="designer">
				<WingBlank>
					<Carousel autoplay={true} infinite>
						{banner.map((item, index) => (
							<a key={index} href="javascript:;" style={{ display: 'inline-block', width: '100%', height: 176 }}>
								<img
									src={item.imgurl}
									alt=""
									style={{ width: '100%', verticalAlign: 'top', height: 176 }}
									onLoad={() => {
										window.dispatchEvent(new Event('resize'));
									}} />
							</a>
						))}
					</Carousel>
				</WingBlank>

				<div className="brand-title">品牌故事</div>
				<div className="brand-list" ref="brand">
					<ul ref="brandlist">
						{brand.map(item => {
							return <li key={item.id} onClick={this.goToStore.bind(this, item.id)}>
								<img src={item.imgurl} alt="" />
							</li>
						})}
					</ul>
				</div>
			</div>
		)
	}
}


export default Index